<template>
  <div>
    <iframe id="printIframe" ref="printIframe" frameborder="0" scrolling="no" style="margin: 0px;padding: 0px;width: 0px;height: 0px;" />
    <div ref="printDIV" style="display:none">
      <div
        v-for="(item, index) in printData"
        :key="index"
        style="width: 800px;height: auto;padding: 10px;font-size: 25px;
  page-break-after:always;display: flex;flex-direction: column;
  "
      >

        <table style="border-collapse:collapse;" width="100%">
          <tbody>
            <tr height="40px">
              <td rowspan="2" colspan="2" valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;"><img src="../../assets/images/export/huanyu1.png" style="object-fit: cover;width: 100%"></td>
              <td rowspan="1" colspan="8" valign="center" style="font-weight:bold;font-size: 20px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;letter-spacing: 20px">发货单</td>
            </tr>
            <tr height="30px">
              <td rowspan="1" colspan="8" valign="center" style="font-weight:400;font-size: 15px;text-align:right;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;padding-right: 20px">苏州市环宇汽车配件有限公司</td>
            </tr>
            <tr height="40px">
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:5000px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">发货单号</td>
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:left;width:5000px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;padding-left: 10px">{{ item.deliverGoodsCode }}</td>
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:6000px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">创建人员</td>
              <td rowspan="1" colspan="3" valign="center" style="font-weight:400;font-size: 15px;text-align:left;width:3178px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;padding-left: 10px">{{ item.realName }}</td>
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:6000px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">计划单号</td>
              <td rowspan="1" colspan="3" valign="center" style="font-weight:400;font-size: 15px;text-align:left;width:3093px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;padding-left: 10px">{{ item.planCode }}</td>
            </tr>
            <tr height="40px">
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">总毛重</td>
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:left;width:5632px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;padding-left: 10px">{{ item.totalGrossWeight }}</td>
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">总净重</td>
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:left;width:3178px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;padding-left: 10px">{{ item.totalNetWeight }}</td>
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:6000px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">托盘总体积</td>
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:left;width:2773px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;padding-left: 10px">{{ item.totalTrayVolume }}</td>
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">托盘数量</td>
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:left;width:3093px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;padding-left: 10px">{{ item.numberOfPallets }}</td>
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:6000px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">托盘总重量</td>
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:left;width:3029px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;padding-left: 10px">{{ item.totalPalletWeight }}</td>
            </tr>
            <tr height="15px">
              <td rowspan="1" colspan="10" valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #d0d7e5 1px;border-left:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;" />
            </tr>
            <tr height="30px">
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">编号</td>
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:5632px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">规格型号</td>
              <td rowspan="1" colspan="2" valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">结构</td>
              <td rowspan="1" colspan="2" valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">发货数量</td>
              <td rowspan="1" colspan="2" valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">箱数</td>
              <td rowspan="1" colspan="2" valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">备注</td>
            </tr>
            <tr v-for="(item2,index2) in item.data" :key="index2" height="30px">
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">{{ index2+1 }}</td>
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:5632px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">{{ item2.model }}</td>
              <td rowspan="1" colspan="2" valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">{{ item2.structure }}</td>
              <td rowspan="1" colspan="2" valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">{{ item2.sendNum }}</td>
              <td rowspan="1" colspan="2" valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">{{ item2.packingNum }}</td>
              <td rowspan="1" colspan="2" valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">{{ item2.remark }}</td>
            </tr>
            <tr height="30px">
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;" />
              <td valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:5632px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">合计</td>
              <td rowspan="1" colspan="2" valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;" />
              <td rowspan="1" colspan="2" valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">{{ item.totalNum }}</td>
              <td rowspan="1" colspan="2" valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;">{{ item.totalPackingNum }}</td>
              <td rowspan="1" colspan="2" valign="center" style="font-weight:400;font-size: 15px;text-align:center;width:3520px;border-top:solid #000000 1px;border-right:solid #000000 1px;border-left:solid #000000 1px;border-bottom:solid #000000 1px;" />
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PrintShippingOrder',
  props: {
    printData: {}
  },
  data() {
    return {
    }
  },
  watch: {
    printData(val) {
      console.log(val)
      if (val.length > 0) {
        setTimeout(() => {
          this.print()
        }, 200)
      }
    }
  },
  mounted() {

  },
  methods: {
    print() {
      // // 拿到要打印区域的dom结构并设置到Iframe的srcdoc属性上面
      var printIframe = this.$refs.printIframe
      var newstr = this.$refs.printDIV.innerHTML
      printIframe.setAttribute('srcdoc', newstr)
      printIframe.onload = function() {
      // 去掉iframe里面的dom的body的padding margin的默认数值
        printIframe.contentWindow.document.body.style.padding = '0px'
        printIframe.contentWindow.document.body.style.margin = '0px'
        // 开始打印
        printIframe.contentWindow.focus()
        printIframe.contentWindow.print()
      }
    },
    print2() {
    }
  }
}
</script>
<style scoped>

</style>
